<template>
  <div>
    <a-card>
      <a-row :gutter="20">
        <!-- 添加按钮 -->
        <a-col :span="4">
          <a-button type="primary" @click="addCate()">添加</a-button>
        </a-col>
      </a-row>

      <!-- 分类信息显示表格 -->
      <a-table :columns="columns" rowKey="id" :pagination="pagination" :data-source="cateList" @change="handleTableChange" bordered>
        <!-- 操作按钮 -->
        <template slot="action" slot-scope="data">
          <div class="actionSlot">
            <a-button type="primary" icon="edit" style="margin: 0 5px;" @click="editCate(data.ID)">编辑
            </a-button>
            <a-button type="danger" icon="delete" style="margin: 0 5px;" @click="deleteCate(data.ID)">删除
            </a-button>
          </div>
        </template>
      </a-table>

      <!-- 新增分类区域 -->
      <a-modal closable title="新增分类" :visible="addCateVisible" @ok="addCateOk" @cancel="addCateCancel" >
        <a-form-model :model="addCateInfo" :rules="addCateRules" ref="addCateRef">
          <a-form-model-item label="分类名" prop="name">
            <a-input v-model="addCateInfo.name"></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-modal>

      <!-- 编辑分类区域 -->
      <a-modal closable title="编辑分类" :visible="editCateVisible" @ok="editCateOk" @cancel="editCateCancel">
        <a-form-model :model="editCateInfo" :rules="editCateRules" ref="editCateRef">
          <a-form-model-item label="分类名" prop="name">
            <a-input v-model="editCateInfo.name"></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
// 表格列配置
const columns = [
  {
    title: 'ID',
    dataIndex: 'ID',
    width: '10%',
    key: 'id',
    align: 'center'
  },
  {
    title: '分类名',
    dataIndex: 'name',
    width: '20%',
    key: 'name',
    align: 'center'
  },
  {
    title: '数量',
    dataIndex: 'num',
    width: '20%',
    key: 'num',
    align: 'center'
  },
  {
    title: '操作',
    width: '30%',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]

export default {
  data () {
    return {
      // 分页配置
      pagination: {
        pageSizeOptions: ['10', '20'],
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => `共${total}条`
      },
      // 分类列表数据
      cateList: [],
      // 表格列信息（不可少）
      columns,
      // 分页查询参数
      queryParam: {
        name: '', // 分类搜索文本
        pageSize: 10,
        pagenum: 1
      },
      visible: false,

      addCateVisible: false, // 新增分类对话框是否显示
      editCateVisible: false, // 编辑分类对话框是否显示
      // 分类信息(新增分类使用)
      addCateInfo: {
        ID: 0,
        name: ''
      },
      // 分类信息（更新分类使用）
      editCateInfo: {
        ID: 0,
        name: ''
      },

      // 新增分类的表单验证
      addCateRules: {
        // 分类名校验规则
        name: [
          { required: true, message: '请输入分类名', trigger: 'blur' },
          { min: 2, max: 50, message: '分类名长度在2到50个字符之间', trigger: 'blur' }
        ]
      },

      // 更新分类的表单验证
      editCateRules: {
        // 分类名校验规则
        name: [
          { required: true, message: '请输入分类名', trigger: 'blur' },
          { min: 2, max: 50, message: '分类名长度在2到50个字符之间', trigger: 'blur' }
        ]
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getCateList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 方法集
  methods: {
    // 获取分类列表
    async getCateList () {
      const { data: res } = await this.$axios.get('admin/categories', {
        params: {
          pagesize: this.queryParam.pagesize,
          pagenum: this.queryParam.pagenum
        }
      })
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.cateList = res.data
      this.pagination.total = res.total
    },

    // 处理表格分页改变事件
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      pager.pageSize = pagination.pageSize
      this.queryParam.pagesize = pagination.pageSize
      this.queryParam.pagenum = pagination.current

      if (pagination.pageSize !== this.pagination.pageSize) {
        this.queryParam.pagenum = 1
        pager.current = 1
      }
      this.pagination = pager
      this.getCateList()
    },

    // 删除分类
    deleteCate (id) {
      this.$confirm({
        title: '提示：请再次确认',
        content: '确定删除此分类吗?一旦删除，不可恢复。',
        onOk: async () => {
          const res = await this.$axios.delete(`/admin/category/${id}`)
          if (res.status !== 200) {
            return this.$message.error(res.message)
          }
          this.$message.success('删除成功')
          this.getCateList()
        },
        onCancel: () => {
          this.$message.info('操作已取消')
        }
      })
    },

    // 显示新增分类对话框
    addCate () {
      this.addCateVisible = true
    },

    // 新增分类
    addCateOk () {
      this.$refs.addCateRef.validate(async (valid) => {
        if (!valid) return this.$message.error('参数不符合要求请重新输入')
        const { data: res } = await this.$axios.post('/admin/category', {
          name: this.addCateInfo.name
        })
        if (res.status !== 200) {
          return this.$message.error(res.message)
        }
        this.$refs.addCateRef.resetFields()
        this.addCateVisible = false
        this.$message.success('新增分类成功')
        this.getCateList()
      })
    },
    // 取消新增分类
    addCateCancel () {
      this.$refs.addCateRef.resetFields()
      this.addCateVisible = false
      this.$message.info('新增分类取消')
    },

    // 显示编辑分类对话框
    async editCate (id) {
      this.editCateVisible = true
      const { data: res } = await this.$axios.get(`/admin/category/${id}`)
      this.editCateInfo = res.data
    },
    // 编辑分类确认
    editCateOk () {
      this.$refs.editCateRef.validate(async (valid) => {
        if (!valid) return this.$message.error('参数不符合要求请重新输入')

        const { data: res } = await this.$axios.put(`/admin/category/${this.editCateInfo.ID}`, {
          name: this.editCateInfo.name
        })
        if (res.status !== 200) {
          return this.$message.error(res.message)
        }
        this.$refs.editCateRef.resetFields()
        this.editCateVisible = false
        this.$message.success('编辑分类信息成功')
        this.getCateList()
      })
    },
    // 编辑分类取消
    editCateCancel () {
      this.$refs.editCateRef.resetFields()
      this.editCateVisible = false
      this.$message.info('编辑取消')
    }
  }
}
</script>
<style scoped>
  .actionSlot {
    display: flex;
    justify-content: center;
  }
</style>
